<!-- **
    * @description radio 单选组件
** -->
<!-- **
    * @use 无需引入直接使用 <yfn-radio v-model="value" :options="[]" @change="changeRadio"></yfn-radio>
          eg: <yfn-radio v-model="value" :options="[{label: '文本', value: 1}]" @change="changeRadio"></yfn-radio>
          eg插槽: <template #label="{ props }"></template>
    * @params参数说明：
    * @params {v-model/value}          绑定值
    * @params {options}                单选数据 Array
    * @params {options-key}            单选数据键值对 Object，eg：{label: 'title'}
    * @params {type}                   单选类型，默认 -， 可选值 button 按钮样式
    * @params {size}                   单选框组尺寸，默认 -，可选值 medium / small / mini
    * @params {disabled}               是否禁用，默认 false
    * @params {...}                    继承 a-radio-group 原生属性/事件
** -->
<!-- **
    * @params {options}                单选数据
    * @params {options.label}          文案
    * @params {options.value}          选项的 value
    * @params {options.disabled}       是否禁用，默认 false
    * @params {options.visible}        单选是否显示，默认 true
    * @params {...}                    继承 a-radio 原生属性
** -->
<!-- **
    * @events事件：
    * @change                          值改变时触发
    * @get-instance                    获取实例
    * @{...}                           继承 a-radio-group 原生事件
** -->
<!-- **
    * @slot插槽：
    * @label                           自定义单选框内容, 参数 props
    * @radio                           自定义单选框, 参数 props
** -->
<template>
  <a-radio-group class="YfnRadio" ref="YfnRadio">
    <template v-for="(item, i) in setOptions(props.options)" :key="i">
      <a-radio v-if="item.visible" v-bind="item">
        {{ item.label }}
        <!-- 插槽 -->
        <template v-if="slots.label" #default>
          <slot name="label" :props="{ ...item, $index: i }"></slot>
        </template>
        <template v-if="slots.radio" #radio>
          <slot name="radio" :props="{ ...item, $index: i }"></slot>
        </template>
      </a-radio>
    </template>
  </a-radio-group>
</template>

<script lang="ts" setup>
  import { defineProps, useSlots, getCurrentInstance } from 'vue'
  /* props */
  const props = defineProps({
    options: Array,
    optionsKey: Object,
  })
  /* proxy */
  const { proxy } = getCurrentInstance() as any
  // emit
  const emit = defineEmits(['get-instance'])
  /* slots */
  const slots = useSlots()
  /* fn */
  const setOptions = (arr: any = []) => {
    const options = arr.map((p: any) => {
      return { visible: true, ...keyTo(p, props.optionsKey) }
    })
    return options
  }
  // 实例
  const setInstance = () => {
    emit('get-instance', proxy)
  }
  setInstance()
  // 键值转换
  const keyTo = (value: any = [], keyValue: any = {}) => {
    let obj = { ...value }
    Object.keys(keyValue || {}).forEach((key) => {
      obj[key] ?? (obj[key] = obj[keyValue[key]])
    })
    return obj
  }
</script>

<style scoped lang="less"></style>
